<template>
  <div id="identiy">
    <div class="identiy-inner">
      <md-scroll-view :scrolling-x="false" ref="scrollView" :autoReflow="true">
        <!-- 注册 ： 上传三合一图 -->
        <div class="certificate-upload" v-if="obligeeType">
          <h4>三合一营业执照副本</h4>
          <div class="control-block">
            <img
              v-if="imageList['reader1'] != '' "
              :src="imageList['reader1']"
              preview="1"
              alt
            />
            <div class="image-reader-add">
              <md-image-reader
                name="reader1"
                @select="onReaderSelect"
                @complete="onReaderComplete"
                @error="onReaderError"
                is-multiple
              ></md-image-reader>
              <md-icon name="camera" size="lg" color="#ddd"></md-icon>
              <p>上传营业执照</p>
            </div>
          </div>
        </div>
        <!-- 注册 ： 法人授权书 -->
        <div class="certificate-upload" v-if="obligeeType">
          <h4>法人授权书</h4>
          <div class="control-block">
            <img
              v-if="imageList['reader2'] != '' "
              :src="imageList['reader2']"
              preview="2"
              alt
            />
            <div class="image-reader-add">
              <md-image-reader
                name="reader2"
                @select="onReaderSelect"
                @complete="onReaderComplete"
                @error="onReaderError"
                is-multiple
              ></md-image-reader>
              <md-icon name="camera" size="lg" color="#ddd"></md-icon>
              <p>上传法人授权书</p>
            </div>
          </div>
        </div>

        <!-- 注册 ：上传身份证 -->
        <div class="certificate-upload">
          <h4>{{obligeeType ? "被授权人" : ""}}身份证</h4>
          <div class="control-block">
            <div class="image-card-add">
              <div class="pre-view" v-if="imageList['reader3'] != ''">
                <img :src="imageList['reader3']" alt />
              </div>
              <md-image-reader
                name="reader3"
                @select="onReaderSelect"
                @complete="onReaderComplete"
                @error="onReaderError"
                is-multiple
              ></md-image-reader>
              <md-icon name="camera" size="lg" color="#ddd"></md-icon>
              <p>上传身份证信息面</p>
            </div>
            <div class="image-card-add">
              <div class="pre-view" v-if="imageList['reader4'] != ''">
                <img :src="imageList['reader4']" alt />
              </div>
              <md-image-reader
                name="reader4"
                @select="onReaderSelect"
                @complete="onReaderComplete"
                @error="onReaderError"
                is-multiple
              ></md-image-reader>
              <md-icon name="camera" size="lg" color="#ddd"></md-icon>
              <p>上传身份证国徽面</p>
            </div>
          </div>
        </div>
        <!-- 注册 ：法人更换提示 -->
        <div class="tip">
          <md-notice-bar icon="info-solid" mode="link" type="activity" multi-rows>
            <p>如果您是外国人，没有中国身份证，请点击这里！</p>
            <p>If you are the owner of a non-Chinese citizenship, please click here!</p>
          </md-notice-bar>
        </div>
        <!-- 注册 ：身份信息 -->
        <div class="identity-input">
          <md-field>
            <md-input-item v-model="idinfo.name" title="姓名" placeholder="请输入真实姓名" align="right"></md-input-item>
            <md-input-item v-model="idinfo.sex" title="性别" placeholder="请输入性别：男" align="right"></md-input-item>
            <md-input-item v-model="idinfo.minority" title="民族" placeholder="请输入民族：汉" align="right"></md-input-item>
            <md-input-item
              v-model="idinfo.birth_date"
              title="出生日期"
              placeholder="20190101"
              align="right"
            ></md-input-item>
            <md-input-item
              v-model="idinfo.address"
              title="身份证地址"
              placeholder="请输入身份证地址"
              align="right"
            ></md-input-item>
            <md-input-item
              v-model="idinfo.idcard_num"
              title="身份证号"
              placeholder="请输入身份证号"
              maxlength="18"
              align="right"
            ></md-input-item>
            <md-input-item
              v-model="idinfo.organization"
              title="签发机关"
              placeholder="请输入身份证签发机关"
              align="right"
            ></md-input-item>
            <md-input-item
              v-model="idinfo.idcard_begin_date"
              title="签发日期"
              type="text"
              placeholder="签发日期：19990101"
              align="right"
            ></md-input-item>
            <md-input-item
              v-model="idinfo.idcard_end_date"
              title="失效日期"
              type="text"
              placeholder="失效日期：20200101"
              align="right"
            ></md-input-item>
          </md-field>
        </div>
        <!-- 按钮区 -->
        <div class="btn-block">
          <!-- 注册 -->
          <md-button round type="primary" @click="next">下一步</md-button>
        </div>
      </md-scroll-view>
    </div>
  </div>
</template>

<script>
import https from "@/https";
import config from "@/config";
import imageProcessor from "mand-mobile/components/image-reader/image-processor"; //图片压缩

// import ymd from "../../../static/json/ymd.js";
import {
  NoticeBar,
  Icon,
  ImageReader,
  Tag,
  Toast,
  Button,
  InputItem,
  Field,
  FieldItem,
  DetailItem,
} from "mand-mobile";

export default {
  components: {
    [NoticeBar.name]: NoticeBar,
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
    [Tag.name]: Tag,
    [Button.name]: Button,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [DetailItem.name]: DetailItem,
  },
  name: "identiy",
  data() {
    return {
      checked: true,
      imageList: {
        reader1: "",
        reader2: "/static/images/register/shouquan.png",
        reader3: "",
        reader4: ""
      },
      idinfo: {
        business_license_file: "", //营业执照url  若前端页面无此行，默认传空字符串
        attorney_of_legal_person_file: "", //法人授权url

        idcard_positive_file: "", //身份证正面url
        idcard_back_file: "", //身份证反面url

        name: "", //姓名
        sex: "", //性别直接传男 或者 女
        minority: "", //民族
        birth_date: "", //出生
        address: "", //住址
        idcard_num: "", //身份证号

        organization: "", //签发机关
        idcard_begin_date: "", //身份证有效开始期限
        idcard_end_date: "" //身份证失效日期
      }
    };
  },
  computed: {
    obligeeType() {
      if (
        this.$store.state.landinfo.length != 0 &&
        this.$store.state.landinfo[0].obligee != undefined &&
        this.$store.state.landinfo[0].obligee.length > 6
      ) {
        console.log("公司");
        return true;
      } else {
        console.log("个人");
        return false;
      }
    }
  },
  methods: {
    //  上传图片
    onReaderSelect() {
      Toast.loading("图片识别中...");
    },
    onReaderComplete(name, { dataUrl }) {
      imageProcessor({
        dataUrl,
        width: 900,
        // height: 1800,
        quality: 0.5
      }).then(({ dataUrl }) => {
        this.imageList[name] = dataUrl;
        if (name == "reader1") {
          let params = {
            image: dataUrl
          };
          https
            .fetchPost(config.putYingYe, params)
            .then(res => {
              Toast.hide();
              if (res.data.code == 1) {
                let _this = this;
                let callBack = function(res) {
                  if (res.data.code == 1) {
                    _this.idinfo.business_license_file = res.data.data.url;
                    Toast.hide();
                    Toast.succeed("添加成功", 2500);
                  } else {
                    Toast.hide();
                    Toast.failed("图片上传失败,请重试");
                  }
                };
                this.saveBase64Image(dataUrl, callBack);
              } else {
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
              Toast.info(err.data.msg);
            });
        } else if (name == "reader2") {
          let params = {
            image: dataUrl
          };
          https
            .fetchPost(config.putYingYe, params)
            .then(res => {
              Toast.hide();
              console.log(res.data.data);
              if (res.data.code == 1) {
                let _this = this;
                let callBack = function(res) {
                  if (res.data.code == 1) {
                    _this.idinfo.attorney_of_legal_person_file =
                      res.data.data.url;
                    Toast.hide();
                    Toast.succeed("添加成功", 2500);
                  } else {
                    Toast.hide();
                    Toast.failed("图片上传失败,请重试");
                  }
                };
                this.saveBase64Image(dataUrl, callBack);
              } else {
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
              Toast.info(err.data.msg);
            });
        } else if (name == "reader3") {
          // 身份证信息页
          let params = {
            image: dataUrl,
            side: "front" //信息页
          };
          https
            .fetchPost(config.putIdCard, params)
            .then(res => {
              Toast.hide();
              console.log(res.data);
              if (res.data.code == 1) {
                if (res.data.data.image_status == "normal") {
                  let data = res.data.data.words_result;
                  this.idinfo.name = data["姓名"].words;
                  this.idinfo.sex = data["性别"].words;
                  this.idinfo.minority = data["民族"].words;
                  this.idinfo.birth_date = data["出生"].words;
                  this.idinfo.address = data["住址"].words;
                  this.idinfo.idcard_num = data["公民身份号码"].words;
                  let _this = this;
                  let callBack = function(res) {
                    if (res.data.code == 1) {
                      _this.idinfo.idcard_positive_file = res.data.data.url;
                      Toast.hide();
                      Toast.succeed("添加成功", 2500);
                    } else {
                      Toast.hide();
                      Toast.failed("图片上传失败,请重试");
                    }
                  };
                  this.saveBase64Image(dataUrl, callBack);
                } else {
                  Toast.failed("图片识别失败,请手填或重新识别");
                }
              } else {
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
              Toast.info(err.data.msg);
            });
        } else if (name == "reader4") {
          // 身份证国徽
          let params = {
            image: dataUrl,
            side: "back" //国徽页
          };
          https
            .fetchPost(config.putIdCard, params)
            .then(res => {
              Toast.hide();
              console.log(res.data);
              if (res.data.code == 1) {
                if (res.data.data.image_status == "normal") {
                  let data = res.data.data.words_result;
                  this.idinfo.idcard_end_date = data["失效日期"].words;
                  this.idinfo.idcard_begin_date = data["签发日期"].words;
                  this.idinfo.organization = data["签发机关"].words;
                  let _this = this;
                  let callBack = function(res) {
                    if (res.data.code == 1) {
                      _this.idinfo.idcard_back_file = res.data.data.url;
                      Toast.hide();
                      Toast.succeed("添加成功", 2500);
                    } else {
                      Toast.hide();
                      Toast.failed("图片上传失败,请重试");
                    }
                  };
                  this.saveBase64Image(dataUrl, callBack);
                } else {
                  Toast.failed("图片识别失败,请手填或重新识别");
                }
              } else {
                Toast.info(res.data.msg);
              }
            })
            .catch(err => {
              Toast.hide();
              console.log(err);
              Toast.info(err.data.msg);
            });
        }
        this.$previewRefresh();
      });
    },
    onReaderError(name, { msg }) {
      Toast.failed(msg);
    },
    next() {
      if (this.obligeeType && this.idinfo.business_license_file == "") {
        Toast.failed("请上传营业执照", 2000);
        return;
      }
      if (this.obligeeType && this.idinfo.attorney_of_legal_person_file == "") {
        Toast.failed("请上传法人授权书", 2000);
        return;
      }
      let name = this.idinfo.name;
      let sex = this.idinfo.sex;
      let minority = this.idinfo.minority;
      let birth_date = this.idinfo.birth_date;
      let address = this.idinfo.address;
      let idcard_num = this.idinfo.idcard_num;
      let organization = this.idinfo.organization;
      let idcard_begin_date = this.idinfo.idcard_begin_date;
      let idcard_end_date = this.idinfo.idcard_end_date;

      if (
        name == "" ||
        sex == "" ||
        minority == "" ||
        birth_date == "" ||
        address == "" ||
        idcard_num == "" ||
        organization == "" ||
        idcard_begin_date == "" ||
        idcard_end_date == ""
      ) {
        Toast.failed("请上完善身份信息", 2000);
        return;
      }
      if (!this.obligeeType && this.$store.state.landinfo[0].obligee != "" && this.$store.state.landinfo[0].obligee != undefined &&this.$store.state.landinfo[0].obligee != name) {
        Toast.failed("您的身份信息与产权证权利人不符");
        return;
      }
      this.$store.commit("saveIdentityInfo", this.idinfo);
      this.$emit("nextTo", "p3");
    },
    // 64图转url
    saveBase64Image(dataUrl, callBack) {
      let params = {
        image: dataUrl
      };
      https
        .fetchPost(config.base64Image, params)
        .then(res => {
          callBack(res);
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {},
  mounted() {}
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#identiy {
  .identiy-inner {
    height: 100vh;
  }
  // background: #fff;
  .tip {
    background: #fff;
    z-index: 0;
    padding: 20px 0 0;
    p {
      font-size: 24px;
    }
  }
  .certificate-upload {
    background: #fff;
    h4 {
      padding-left: 30px;
      height: 80px;
      display: flex;
      align-items: center;
      font-size: 30px;
      &::before {
        content: "";
        display: block;
        height: 38px;
        border-left: 6px solid $themeGold;
        margin-right: 28px;
      }
    }
    .control-block {
      display: flex;
      justify-content: center;
      .image-reader-add,
      .image-card-add {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 4px 1px #eee;
        border-radius: 14px;
        height: 320px;
        width: 280px;
        margin: 10px 15px;
        background: #fff;
        .pre-view {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 9;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .md-image-reader {
          position: absolute;
          top: 0;
          height: 100%;
          width: 100%;
        }
        p {
          margin-top: 20px;
          font-size: 24px;
          color: #666;
        }
      }
      img {
        height: 320px;
        width: 280px;
      }
      .image-card-add {
        width: 300px;
        height: 180px;
        img {
          width: 300px;
          height: 180px;
        }
      }
    }
  }
  .btn-block {
    background: #fff;
    padding-top: 20px;
    padding-bottom: 200px;
    button {
      margin: 0 auto;
      width: 250px;
      height: 70px;
      font-size: 30px;
    }
  }
}
</style>
